<div class="container w1100 clearfloat">
  <div class="column mainCol l">
    <div id="content1" class="content">
      <h2 class="title">日常开发状态</h2>
      <p class="detialInfo">拿到设计稿后，与后端同事约定借口格式，让后端同事尽快提供mock数据，如果提供不了，便自己构造测试数据。接着切图，切图过程中会解决好响应式问题和兼容问题，待到后端产出真是数据时，更换js中的接口地址，联调ok便发布页面。</p>
      <h2 class="subtitle">mock数据</h2>
      <p class="detialInfo">作为前端经常需要模拟后台数据，我们称之为mock。通常的方式为自己搭建一个服务器，返回我们想要的数据。一般使用<a class="link" href="http://mockjs.com/" target="__blank">mock.js</a>获取mock数据，mock.js：</p>
      <ul class="infoList">
        <li>前后端分离，让前端工程师独立于后端开发。</li>
        <li>增加单元测试的真实性，通过随机数据，模拟各种场景。</li>
        <li>开发无侵入，不需要修改既有代码，就可以拦截ajax请求，返回模拟的响应数据。</li>
        <li>用法简单，符合直接的借口。</li>
        <li>数据类型丰富，支持随机的文本，数字，布尔值，日期，邮箱，链接，图片，颜色等。</li>
        <li>方便扩展，支持扩展更多数据类型，支持自定义函数和正则。</li>
      </ul>
      <p class="detialInfo">最重要的是：</p>
      <ul class="infoList">
        <li>基于html模板生成数据</li>
        <li>基于数据模型生成数据</li>
        <li>拦截ajax请求</li>
      </ul>
    </div>
    <div id="content2" class="content">
      <h2 class="title">前端必会的知识点</h2>
      <p class="detialInfo">(1)、常用的浏览器以及对应的内核：IE使用的内核是Trident、FireFox使用的内核是Gecko、Opera使用的内核是Presto、Safari与Chrome使用的内核是Webkit。</p>
      <p class="detialInfo">(2)、行内块元素的兼容性使用（IE8以下）：</p>
      <pre><code class="css">display:inline-block;<br>*display:inline;/*ie7-6 */<br>*zoom:1;/*ie7-6 */</code></pre>
      <p class="detialInfo">(3)、清楚浮动有哪些方法，比较好的方式是哪一种：</p>
       <ul class="infoList">
        <li>父级div定义height。</li>
        <li>结尾处加空div标签clear：both。</li>
        <li>父级div定义伪类：after和zoom。</li>
        <li>父级div定义overflow：hidden。</li>
        <li>父级div也浮动，需要定义宽度。</li>
        <li>父级div定义display:table。</li>
        <li>结尾处加br标签clear:both。</li>
      </ul>
      <p class="detialInfo">比较好的是第三种：</p>
      <pre><code class="css">.clearfloat:after{content:""; display:block; clear:both; visibility:hidden; height:0;}<br>.clearfloat{zoom:1;}</code></pre>
      <p class="detialInfo">(4)、Doctype作用，标准模式与兼容模式各有什么区别：DOCTYPE告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或者格式不正确会导致文档以兼容模式呈现。标准模式的排版和js运行都是以浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示模拟老式浏览器的行为以防止站点无法工作。</p>
      <p class="detialInfo">(5)、HTML5为什么只需要写&lt;!DOCTYPE HTML&gt;:HTML5不基于SGML，因此不需要对DTD进行引用，但需要DOCTYPE来规范浏览器的行为。</p>
      <p class="detialInfo">(6)、介绍一下你对浏览器内核的理解：主要分成两部分：渲染引擎——负责取得网页的内容；js引擎——解析和执行js来实现网页的动态效果。最开始渲染引擎和js引擎并没有区分的很明显，后来js引擎越来越独立，内核就倾向于只指渲染引擎。</p>
      <p class="detialInfo">(7)、HTML5有哪些新特性,如何处理HTML5新标签的浏览器兼容问题,如何区别HTML和HTML5:HTML5现在已经不是SGML的子集，主要是关于图像，位置，存储，多任务等功能的增加。如下：</p>
       <ul class="infoList">
        <li>绘画canvas。</li>
        <li>用于媒介回放的video和audio元素。</li>
        <li>本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失。</li>
        <li>sessionStorage的数据在浏览器关闭后自动删除。</li>
        <li>语意化更好的内容元素，比如article、footer、header、nav、section。</li>
        <li>表单控件：calender、date、time、email、url、search。</li>
        <li>新的技术：webworker、websocket、Geolocation。</li>
      </ul>
      <p class="detialInfo">IE8/IE7/IE6支持通过document.createElement方法产生新的标签，可以利用这一特性让这些浏览器支持HTML5新标签。浏览器支持新标签后，还需要添加标签默认的样式。也可以直接使用成熟的框架，比如html5shiv.js。</p>
      <pre><code class="html">&lt;!--[if lt IE 9]&gt;在在IE9的浏览器中有效&lt;![endif]--&gt;</code></pre>
      <p class="detialInfo">(8)、js的基本数据类型；undefined、null、boolean、number、string。</p>
      <p class="detialInfo">(9)、js有哪些内置对象；数据封装类对象——object、array、boolean、number、string；其他对象——function、arguments、math、date、regexp、error。</p>
      <p class="detialInfo">(10)、this对象的理解：this对象总是指向函数的直接调用者，如果有new关键字，this指向new出来的对象，在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this指向全局对象window。</p>
      <p class="detialInfo">(11)、eval是做什么的：它的功能是把对应的字符串解析成js代码并运行，应该避免使用eval，不安全，非常耗性能（2次，一次是解析成js语句，一次执行），有json字符串转换为json对象的时候可以使用eval。</p>
      <pre><code class="javascript">var obj = eval('('+ str + ')');</code></pre>
      <p class="detialInfo">(12)、DOM怎样添加、移除、移动、创建和查找节点：</p>
      <pre><code class="javascript">createDocumentFragment()/*创建一个DOM片段*/<br>createElement()/*创建一个具体的元素*/<br>createTextNode()/*创建一个文本节点*/<br>appendChild()/*添加*/<br>removeChild()/*移除*/<br>replaceChild()/*替换*/<br>insertBefore()/*在已有的子节点前插入一个新的子节点*/<br>getElementsByTagName()/*通过标签名*/<br>getElementsByName()/*通过元素的Name属性的值*/<br>getElementById()/*通过元素id，唯一性*/</code></pre>
      <p class="detialInfo">(13)、null和undefined的区别：null是一个表示“无”的对象，转为数值时为0，undefined是一个表示“无”的原始值，转为数值是为NaN。undefined——变量被声明了，但没有赋值时，就等于undefined；调用函数时，应该提供的参数没有提供，该参数等于undefined；对象没有赋值的属性，该属性的值为undefined。unll——作为函数的参数，表示该函数的参数不是对象；作为对象原型链的终点。</p>
      <p class="detialInfo">(14)、new操作符具体干了什么：</p>
      <ul class="infoList">
        <li>创建一个空对象，并且this变量引用该对象，同时还继承了该函数的原型。</li>
        <li>属性和方法被加入到this引用的对象中。</li>
        <li>新创建的对象由this所引用，并且最后隐式的返回this。</li>
      </ul>
      <p class="detialInfo">(15)、json的了解：json（javascript object notation）是一种轻量级的数据交换格式，它是基于javascript的一个子集，数据格式简单，易于读写，占用宽带小。</p>
      <p class="detialInfo">(16)、如何获取UA（User Agent用户代理）：</p>
      <pre><code class="javascript">function whatBrowser(){<br> document.Browser.Name.value = navigator.appName;<br> document.Browser.Version.value = navigator.appVersion;<br> document.Browser.Agent.value = navigator.userAgent;<br>}</code></pre>
      <pre><code class="html">&lt;body onLoad="whatBrowser()"&gt;
  &lt;table&gt;
    &lt;form name="Browser"&gt;
      &lt;tr&gt;
        &lt;td&gt;浏览器名称: &lt;/td&gt;
        &lt;td&gt;&lt;input type="text" name="Name" size="110%" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;版本号: &lt;/td&gt;
        &lt;td&gt;&lt;input type="text" name="Version" size="110%" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;代码名称: &lt;/td&gt;
        &lt;td&gt;&lt;input type="text" name="Code" size="110%" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;用户代理标识: &lt;/td&gt;
        &lt;td&gt;&lt;input type="text" name="Agent" size="110%" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/form&gt;
  &lt;/table&gt;
&lt;/body&gt;</code></pre>
     <p class="detialInfo">(17)、你有哪些性能优化的方法：</p>
     <ul class="infoList">
        <li>减少http请求次数——css sprites，js，css源码压缩，图片大小控制合适，网页Gzip，cdn托管，data缓存，图片服务器。</li>
        <li>前端模板js+数据，减少由于html标签导致的带宽浪费，前端用变量保存ajax请求结果，每次操作本地变量，不用请求，减少请求的次数。</li>
        <li>用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。</li>
        <li>少用全局变量，缓存DOM节点查找的结果，减少IO读取操作。</li>
        <li>避免使用css Expression（css 表达式）又称 Dynamic Properties（动态属性）。</li>
        <li>图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳。</li>
      </ul>
      <p class="detialInfo">(18)、什么叫优雅降级和渐进增强：优雅降级——web站点在所有新式浏览器中能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认他们是否能正常工作。由于ie独特的盒模型布局问题，针对不同版本的IE hack实践过优雅降级了为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效；渐进增强——从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面增加无害于基础浏览器的额外样式和功能，当浏览器支持时，他们会自动地呈现出来并发挥作用。</p>
      <p class="detialInfo">(19)、那些常见操作会造成内存泄露：内存泄露是指任何对象在你不再拥有或需要它之后仍然存在。垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的其他对象数量，如果一个对象的引用数量为0或该对象的唯一引用是循环，那么该对象的内存即可回收。setTimeout()的第一个参数使用字符串而非函数的话，会引发内存泄露。闭包，控制台日志，循环（在两个对象彼此引用彼此保留时，就会产生一个循环）。</p>
      <p class="detialInfo">(20)、线程与进程的区别：一个程序至少有一个进程，一个进程至少有一个线程；线程的划分尺度小于进程，使得多线程程序的并发性高；进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提醒了程序的运动效率；线程在执行过程中与进程还是有区别的，每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制；从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行；操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。</p>
    </div>
    <div id="content3" class="content">
      <h2 class="title">js初级之操作字符串</h2>
      <h2 class="subtitle">截取字符串(substr()/slice())</h2>
      <ul class="infoList">
        <li> 
          substr()=>stringObject.substr(start,length).
          <ul class="infoList">
            <li>start=>必需.要抽取的子串的起始下标.必需是数字,如果是负数,则该参数声明从字符串的尾部开始算起的位置(比如:-1表示字符串中最后一个字符)</li>
            <li>length=>可选.子串中的字符数.</li>
            <li>"stringObject".substr(0,4) = >"stri"</li>
          </ul>
        </li>
        <li>
          slice()=>arrayObject.slice(start,end).该方法不会修改数组,而是返回一个子数组,如果想删除数组中的一段元素,使用Array.splice()
          <ul class="infoList">
            <li>start=>必须.规定从何处开始选取,如果是负数,则从尾部开始.</li>
            <li>end=>可选.规定从何处结束选取,是数组片段结束处的数组下班.如果省略了该参数,则从start开始到数组结束的所有元素.</li>
            <li>"stringObject".slice(0,4) = >"stri"</li>
          </ul>
        </li>
      </ul>
      <h2 class="subtitle">判断字符串是否是这样组成的，第一个必须是字母，后面的可以使字母，数字，下划线，总长度为5-20。</h2>
      <p class="detialInfo">var a = /^[a-zA-Z]{1}\w(4,19}/ => [a-zA-Z]是匹配所有字母,w表示匹配任意字母,数字,下划线.{n}代表重复几次,{n,m}代表重复至少n次,至多m次.</p>
      <h2 class="subtitle">给定一个字符串 "IamWangZhiJun",要求查找里面的字符串Wang。</h2>
      <p class="detialInfo">indexOf()方法表示查找一个字符串在另一个字符串中的位置,返回一个整数,字符串匹配开始的位置.</p>
      <pre><code class="javascript">var str1 = "IamWangZhiJun";<br>var str2 = "Wang";<br>var start = str1.indexOf(str2);<br>var str3 = str1.substr(start ,str2.length);</code></pre>
      <h2 class="subtitle">如何实现一个删除字符串左边空白字符的方法</h2>
      <ul class="infoList">
        <li>知识点1 => replace(),第一个参数为匹配模式(正则),第二个参数为替换内容.</li>
        <li>
            知识点2 => 量词符合贪婪模式.默认情况下匹配贪婪模式.
            <ul class="infoList">
              <li>=>?表示0次或者1次{0,1}</li>
              <li>=>*表示0次或者多次{0,}</li>
              <li>=>+表示1次或者多次{1}.</li>
            </ul>
        </li>
      </ul>
      <pre><code class="javascript">function leftTrim(str){<br>&nbsp;return str.replace(/^\s*/,"");<br>}<br>var a= leftTrim("   abc")/*abc*/</code></pre>
      <h2 class="subtitle">定义一个函数,实现字符串的反转</h2>
      <p class="detialInfo">知识点=> 主要是把字符串从未尾开始的每一个元素截取后,在重新组成一个新的字符串,用到的方法charAt(),返回指定位置的字符.从0开始.</p>
      <pre><code class="javascript">function reverStr(str){<br>&nbsp;var temStr = "";<br>&nbsp;for(var i = str.length-1;i>=0;i--){<br>&nbsp;&nbsp;temStr += str.charAt(i);}<br>&nbsp;return temStr;<br>}</code></pre>
      <h2 class="subtitle">字符串的操作主要有那些</h2>
      <ul class="infoList">
        <li>
          查找类型
          <ul class="infoList">
            <li>indexOf()=>返回匹配开始的位置.</li>
            <li>search()=>返回匹配的第一个位置.大小写敏感,要忽略大小写则要加上i标识(str.seatch(/test/i)).</li>
            <li>match()=>返回一个数组,成员为匹配的字符串.</li>
            <li>length()=>返回字符串的长度.</li>
          </ul>
        </li>
        <li>
            截取，拼接,替换类
            <ul class="infoList">
              <li>slice()=>从原字符串中取回字符串并返回,第一个参数为起始位置，第二个参数为结束位置.</li>
              <li>substr()=>从原字符串中取回字符串并返回，第一个参数是子字符串的开始位置，第二个参数是子字符串的长度.</li>
              <li>concat()=>用于连接两个字符串,返回一个新字符串,不改变原字符串.</li>
              <li>replace()=>第一个参数为被替换的内容，第二个参数为要替换的内容，一般只匹配一个.</li>
              <li>charAt()=>方法返回指定位置的字符，参数是从0开始编号的位置.</li>
              <li>trim()=>删除字符串开始和末尾的空格.</li>
            </ul>
        </li>
        <li>
            转换类
            <ul class="infoList">
              <li>split()=>第一个参数为起始位置 第二个参数为限定放回数组的成员数，注意，第一个参数如果为空，则返回数组的成员是原字符串的每一个字符。此方法会将字符串装换为数组</li>
            </ul>
        </li>
      </ul>
      <h2 class="subtitle">有一个字符串 abcd-ef-ghi,请用js把它处理成ghi&ef&abcd</h2>
      <pre><code class="javascript">var a = "abcd-ef-ghi"<br>var b = a.split("-");<br>var result = b.reverse().join("&")</code></pre>
      <h2 class="subtitle">将字符串"wang zhi j un"中由空格分割的每个单词首字母大小写。</h2>
      <pre><code class="javascript">function changeUpperCase(str){<br>&nbsp;str = str.split(" ");<br>&nbsp;for(var i = 0;i< str.length;i++){<br>&nbsp;&nbsp;str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1);<br>&nbsp;}<br>&nbsp;return str.join(" ");<br>}</code></pre>
    </div>
    <div id="content4" class="content">
      <h2 class="title">JS初级之变量,DOM,循环语句</h2>
      <h2 class="subtitle">JS如何检测变量是一个string类型？请写出函数实现</h2>
      <pre><code class="javascript">function isString(str){<br>&nbsp;if(typeof(str) === "string" || str.constructor === String){<br>&nbsp;&nbsp;return true;<br>&nbsp;}else{<br>&nbsp;&nbsp;return false;<br>&nbsp;}<br>}<br>/*这里需要注意的是也要判断这个值的数据类型*/</code></pre>
      <h2 class="subtitle">请说明javaScript中的nodeName,nodeVaule,nodeType的区别</h2>
      <ul class="infoList">
        <li>
          nodeName=>表示节点的名称
          <ul class="infoList">
            <li>元素节点的nodeName是标签名称.</li>
            <li>属性节点的nodeName是属性名称.</li>
            <li>文本节点的nodeName是#text.</li>
            <li>文档节点的nodeName是#document.</li>
          </ul>
        </li>
        <li>
            nodeValue=>表示文本内容
            <ul class="infoList">
              <li>对于文本节点,nodeValue属性包含文本.</li>
              <li>对于属性节点,nodeValue属性包含属性值.</li>
            </ul>
        </li>
        <li>
            nodeType=>属性返回节点的类型,常用如下:
            <ul class="infoList">
              <li>元素类型对应的节点类型为1.</li>
              <li>属性类型对应的节点类型为2.</li>
              <li>文本属性对应的节点类型为3.</li>
            </ul>
        </li>
      </ul>
      <h2 class="subtitle">下列代码执行后，结果是什么</h2>
      <pre><code class="javascript">for(i = 0,j = 0; i < 6, j < 10; i++, j++){<br>&nbsp;var k = i + j;<br>}<br>console.log(k);/*18*/<br>for(i = 0, j = 0; i < 10, j < 6; i++,j++){<br>&nbsp;var k = i + j;<br>}<br> console.log(k);/*10*/</code></pre>
      <ul class="infoList">
        <li>知识点=>在for语句中条件用;隔开,就相当于并且</li>
        <li>知识点=>逗号表达式返回的结果是由最后一个表达式决定的.</li>
      </ul>
      <h2 class="subtitle">统计从1-400之间的自然对数中含有多少个1</h2>
      <pre><code class="javascript">var count = 0;<br>for(var i = 0; i <= 400; i++){<br>&nbsp;for(var j = 0; j < i.toString().length; j++){<br>&nbsp;&nbsp;if(i.toString()[j] == "1"){<br>&nbsp;&nbsp;&nbsp;count++<br>&nbsp;&nbsp;}<br>&nbsp;}<br>}</code></pre>
    </div>
    <div id="content5" class="content">
      <h2 class="title">JS中级之函数</h2>
      <h2 class="subtitle">编写一个函数，参数为一个元素，返回指定元素的第一个元素.</h2>
      <pre><code class="javascript">function getFirst(el){<br>&nbsp;var nodes = el.children;<br>&nbsp;return nodes.length !=0?noeds[0]:null;<br>}</code></pre>
      <h2 class="subtitle">简述JavaScript中this的理解</h2>
      <ul class="infoList">
        <li>this代表函数执行的时候,自动生成一个内部对象,在函数内使用.</li>
        <li>this指的是调用函数的那个对象.</li>
        <li>
          以下是this的四种用法:
          <ul class="infoList">
            <li>
              纯粹的函数调用,说明此时this代表全局对象.
              <pre><code class="javascript">var x = 1;<br>function test(){<br>&nbsp;this.x = 0;/*这里等同于想= 0*/<br>}<br>test();/*window.test()*/<br>console.log(x);./*0*/</code></pre>
            </li>
            <li>
              作为对象方法的调用,说明此时this指向这个的上级对象.
              <pre><code class="javascript">function test(){<br>&nbsp;console.log(this.x);<br>}<br>var o = {};<br>o.x = 1;<br>o.m = test;<br>o.m();/*1*/</code></pre>
            </li>
            <li>
              作为构造函数的调用,说明此时this是指向新对象,不是全局对象.
              <pre><code class="javascript">var x = 2;<br>function test(){<br>&nbsp;this.x = 1;<br>}<br>var o = new test();<br>console.log(o.x);/*1*/<br>console.log(x);/*2*/</code></pre>
            </li>
            <li>
              apply调用.
              <pre><code class="javascript">var x = 0;<br>function test(){<br>&nbsp;console.log(this.x);<br>}<br>var o = {};<br>o.x = 1;<br>o.m = test;<br>o.m.apply();/*0,当参数为空的时候,默认调用全局*/<br>o.m.apply(o);/*1*/</code></pre>
            </li>
          </ul>
        </li>
      </ul>
      <h2 class="subtitle">什么是闭包？闭包的特性？对页面有什么影响？好处和坏处？请写出一个闭包的简单实例？</h2>
      <ul class="infoList">
        <li>闭包就是能够读取其他函数内部变量的函数.</li>
        <li>
          闭包特性:
          <ul class="infoList">
            <li>
              闭包外层是一个函数.
            </li>
            <li>
              闭包内层也是一个函数.
            </li>
            <li>
              闭包会return内部函数.
            </li>
            <li>
             闭包返回的函数内部不能有return.
            </li>
            <li>
              执行闭包后,闭包内部的变量会缓存.
            </li>
            <li>
             闭包只有被执行的时候才会调用.
            </li>
          </ul>
        </li>
        <li>
          好处和坏处:
          <ul class="infoList">
            <li>
              方便上下文调用.
            </li>
            <li>
              加强封装性.
            </li>
            <li>
              坏处=>浪费内存.
            </li>
          </ul>
        </li>
        <li>
          实例:
          <ul class="infoList">
            <li>
              <pre><code class="javascript">function a(){<br>&nbsp;var i = 0; <br>&nbsp;function b(){console.log(++i);}<br>&nbsp;return b;<br>}<br>var c = a();<br>c();/*执行闭包,结果为1*/<br>c();/*2*/</code></pre>
            </li>
          </ul>
        </li>
      </ul>
      <h2 class="subtitle">作用域问题</h2>
      <pre><code class="javascript">var a = {n:1};<br>var b = a;<br>a.x = a = {n:2}/*a.x = {n:2};a = {n:2}*/<br>console.log(a.x)/*undefined=>首先变量a指向一个对象,变量b也指向这个对象. <br>a.x=a={n:2}已经不共享对象了,a已经改写了,而b.x里面则添加了x={n:2}*/<br>console.log(b.x);/*{n:2}*/</code></pre>
      <h2 class="subtitle">Boolean对象和Boolean值</h2>
      <pre><code class="javascript">var x = new Boolean(false);<br> if(x){<br>&nbsp;alert('hi');<br>}<br>var y = Boolean(0);<br>if(y){<br>&nbsp;alert('hello');<br>}/*alert("hi"),undefined*/</code></pre>
      <h2 class="subtitle">什么是跨域?跨域的几种实现方法?</h2>
      <ul class="infoList">
        <li>跨域是通过js在不同域进行数据传输或者通信,当端口号,协议,域名不同的情况下使用ajax是拿不到数据的.</li>
        <li>
          解决方法:
          <ul class="infoList">
            <li>
              使用window.name进行跨域=><br>a.html页面,比如说域名是www.abc.com/a.thml,这里需要注意的是,数据只能好似字符串形式.
              <pre><code class="html">&lt;script&gt;window.name = "我是a.html页面的数据，我是跨域请求的数据"&lt;/script&gt;</code></pre>
              b.html页面,比如说www.baidu.com/b.html
              <pre><code class="html">&lt;iframe id="proxy" src="www.abc.com/a.html" style="display:none" onload="getdata()"&gt;<br>&lt;/iframe&gt;<br>&lt;script&gt;<br>var iframe = document.getElementById("proxy");<br>function getdata(){<br>&nbsp;iframe.onLoad=function(){<br>&nbsp;&nbsp;var data = iframe.contentWindow.name;<br>&nbsp;&nbsp;alert(data);<br>&nbsp;}<br>&nbsp;iframe.src = "about:blank";<br>}<br>&lt;/script&gt;</code></pre>
            </li>
            <li>
              用H5 window.postMessage.
            </li>
          </ul>
        </li>
      </ul>
      <h2 class="subtitle">判断当前浏览器的类型</h2>
      <pre><code class="javascript">var useAgent = window.navigator.useAgent;<br>if(useAgent.indexOf("Chorme")){<br>&nbsp; console.log("是Chorme浏览器");<br>};<br>if(useAgent.indexOf("Safari")){<br>&nbsp; console.log("是Safari浏览器");<br>}<br>if(useAgent.indexOf("Firefox")){<br>&nbsp; console.log("是Firefox浏览器");<br>}</code></pre>
    </div>
    <div id="content6" class="content">
      <h2 class="title">HTML5，CSS3初级，中级面试题</h2>
      <h2 class="subtitle">CSS3新特性有哪些？请做说明。不少于5条.</h2>
      <ul class="infoList">
        <li>
          选择器类=>first-child/last-child/nth-child/:cheecked
        </li>
        <li>
          文字样式
          <ul class="infoList">
            <li>
              @font-face
              <pre><code class="css">@font-face{<br>&nbsp;font-family:BorderWeb;<br>&nbsp;src:url(BorderWeb.eot);<br>}<br>.border{font-family:"BorderWeb";}</code></pre>
            </li>
            <li>
              text-overflow/white-space/word-wrap
              <pre><code class="css">.ellipsis{<br>&nbsp;text-overflow:ellipsis;<br>&nbsp;overflow:hidden;<br>&nbsp;white-space:nowrap;<br>&nbsp;width:200px;<br>&nbsp;background:#ccc;}</code></pre>
            </li>
            <li>text-decoration为文本添加下划线默认值none</li>
            <li>圆角border-radius</li>
            <li>
              渐变
              <ul class="infoList">
                <li>
                  线性渐变=> linear-gradient([ [ &lt;angle&gt; | to &lt;side-or-corner&gt;] ,]? &lt;color-stop&gt;[, &lt;color-stop&gt;]+)
                  <pre><code class="css">.linearGradient{<br>&nbsp;background:linear-gradient(to left,#333,#999);<br>&nbsp;background:linear-gradient(#fff,#333);<br>&nbsp;background:linear-gradient(to bottom,#fff,#333);<br>&nbsp;background:linear-gradient(180deg, #fff,#333);<br>&nbsp;background:linear-gradient(to bottom,#fff 0%, #333 100%);}</code></pre>
                </li>
                <li>
                  径向渐变
                  <pre><code class="css">.radialGradient{<br>&nbsp;background:radial-gradient(circle at center, #f00,#ff0,#080);<br>&nbsp;background:radial-gradient(circle closest-side, #f00,#ff0,#080);<br>&nbsp;background:radial-gradient(farthest-side,#f00 20%, #ff0 50%, #080 80%);<br>&nbsp;background:radial-gradient(at top right, #f00, #ff0,#080);<br>&nbsp;background:radial-gradient(farthest-side at top right,#f00,#ff0,#080);<br>&nbsp;background:radial-gradient(farthest-side at top right,#f00,#ff0,#080,transparent),<br>&nbsp;radial-gradient(60px at top left, #f00, #ff0,#080);}</code></pre>
                </li>
                <li>
                  阴影=>box-shadow/倒影=>box-reflect : none | &lt;direction&gt; &lt;offset&gt;? &lt;mask-box-image&gt;?
                   <pre><code class="css">.boxReflect{<br>&nbsp;-webkit-box-reflect:below 0 -webkit-line-graient(<br>&nbsp;transparent,transparent 50%, rgba(255,255,255,.3));}</code></pre>
                </li>
                <li>
                  背景=>background-clip:border-box|padding-box|content-box
                </li>
                <li>
                  多列布局column=>column-width|column-count|column-gap|column-rule|column-span|column-fill
                  <pre><code class="css">.columnsTest{<br>&nbsp;columns:column-width columns-count;<br>}</code></pre>
                </li>
                <li>
                  flex布局
                </li>
              </ul>
            </li>
            <li>
              动画/过滤
              <ul class="infoList">
                <li>
                  transition =>transition-property|transition-duration|transition-timing-function|transition-delay
                  <pre><code class="css">.transitionTest{<br>&nbsp;transition:property duration timing-function delay;<br>}</code></pre>
                </li>
                <li>
                  transform:旋转
                  <pre><code class="css">.transformTest{<br>&nbsp;transform:rotate(7deg);<br>&nbsp;transform:translate(x,y);<br>&nbsp;transform:translate3d(x,y,z);<br>&nbsp;transform:scale(x,y);<br>&nbsp;transform:skew(x-angle,y-angle);<br>}</code></pre>
                </li>
                <li>
                  animation:将动画与元素绑定<br>
                  animation:name|duration|timing-function|delay|iteration-count|direction
                  <pre><code class="css">.animationTest{<br>&nbsp;aninmation:mymove 5s infinite;<br>}</code></pre>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
      <h2 class="subtitle">localStorage,sessionStorage,cookie的区别</h2>
      <ul class="infoList">
        <li>
          localStorage用于持久化的本地存储,关闭页面还有,除非主动删除,否则一直存在,存储量大.
        </li>
        <li>
          sessionStorage不是持久化的本地存储,关闭页面就不会有.
        </li>
         <li>
          cookie是与服务器交互的, 作为http规范的一部分而存在,在浏览器和服务器之间来回.存储量小.
        </li>
      </ul>
      <h2 class="subtitle">如何触发页面的回流reflow,重绘repaint,解释下他们的基本原理</h2>
      <ul class="infoList">
        <li>
          DOM元素的修改,添加,删除
        </li>
        <li>
          仅改变DOM元素的字体颜色,只有repaint
        </li>
         <li>
          应用新的样式或者修改任何元素的外观属性
        </li>
        <li>
          resilze浏览器窗口,滚动
        </li>
        <li>
          读取元素如(offsetTop,offsetLeft 等等).
        </li>
        <li>
          原理解析:
            <ul class="infoList">
              <li>
                repaint重绘,是当一个元素的外观被改变的时候产生重绘
              </li>
              <li>
                reflow重排(回流), 是当DOM发生改变,如宽高等,如果reflow的频繁,会导致GPU使用率上升.
              </li>
               <li>
                减少性能影响的方式
                <ul class="infoList">
                  <li>
                    减少对DOM的操作.如查询时候将值赋给局部变量,减少循环对DOM的操作.
                  </li>
                  <li>
                    使用JSON格式来进行数据交互
                  </li>
                </ul>
              </li>
            </ul>
        </li>
      </ul>
      <h2 class="subtitle">transition的局限性</h2>
      <ul class="infoList">
        <li>
         需要时间触发
        </li>
        <li>
          是一次性的,不能重复,除非是一再触发.
        </li>
         <li>
          只有开始和结束2种状态,不能定义中间状态.
        </li>
        <li>
          只能定义一个属性的变化,不能涉及多个属性.
        </li>
        <li>
          不能识别display的变化.
        </li>
      </ul>
      <h2 class="subtitle">如何优化页面速度，提高页面响应。</h2>
      <ul class="infoList">
        <li>
         取消重定向,原因是网站都会首先加载一个空白的页面,然后在定向到另外的页面.
        </li>
        <li>
          合并javascript/css.
        </li>
         <li>
          使用css sprite/启用GZIP.
        </li>
        <li>
          css,js引入文件位置,css放在head里面,js放在尾部
        </li>
        <li>
          img标签要添加alt属性,清除无效的a标签,并给a标签加上title属性.
        </li>
        </li>
         <li>
          缓存静态资源,不用iframe/frame.
        </li>
        <li>
          减少DNS域名查找时间.将DNS的时间设置为较低的水平,比如60-100s进行一次DNS查询
        </li>
      </ul>
      <h2 class="subtitle">如何提高前端性能</h2>
      <ul class="infoList">
        <li>
         用webStorage代替cookie,可以减少HTTP请求的数据量
        </li>
        <li>
          使用css3动画,开启GPU加速,translate3d().
        </li>
         <li>
          缓存HTML标记
        </li>
      </ul>
      <h2 class="subtitle">如何对网站的文件和资源进行优化</h2>
      <p class="detialInfo">1、文件合并. 2、文件最小化. 3、使用cdn托管. 4、缓存的使用.</p>
      <h2 class="subtitle">给页面中所用的元素增加高亮边框</h2>
      <pre><code class="javascript">[].forEach.call($$("*"),function(a){<br>&nbsp;a.style.outlin="1px solid #"+(~~(Math.random()*(1<<24))).toString(16);<br>});</code></pre>
    </div>
    <div id="content7" class="content">
      <h2 class="title">js中的陷阱</h2>
      <h2 class="subtitle">双等号</h2>
      <p class="detialInfo">==操作符比较时会进行类型的强制转换，这意味着它可以比较两个不同类型的对象，在执行比较之前它将会尝试把这两个对象转换成同一个类型，如下：</p>
      <pre><code class="javascript">"1" == 1//true</code></pre>
      <p class="detialInfo">在上面的例子中，可以先将字符串转换成数字型，然后利用对类型敏感的三重等号来进行比较，如下：</p>
      <pre><code class="javascript">Number("1"） === 1//true</code></pre>
      <p class="detialInfo">由于双等号具有强制类型转换的行为，所以它会打破一般的传递规则，如下：</p>
      <pre><code class="javascript">"" == 0/*ture ——空字符串会被强制转换为数字0*/<br>0 == "0"/*true——数字0会被强制转换成字符串"0"*/<br>"" == "0"/*false——两操作数都是字符串所以不执行强制转换*/</code></pre>
      <p class="detialInfo">如果使用三重等号，上面的三个比较都会返回false。</p>
      <h2 class="subtitle">字符串替换</h2>
      <p class="detialInfo">字符串替换函数仅仅会替换第一个匹配项，并不能替换你所期望的全部匹配项，如下：</p>
      <pre><code class="javascript">"bob".replace("b","x");/*xob*/<br>"bob".replace(/b/,"x");/*xob(使用了正则表达式)*/</code></pre>
      <p class="detialInfo">如果要替换所有的匹配项，可以使用正则表达式，并为他添加全局修饰符，如下：</p>
      <pre><code class="javascript">"bob".replace(/b/g,"x");/*xox*/<br>"bob".replace(new RegExp("b","g"),"x");/*xox*/</code></pre>
      <p class="detialInfo">全局修饰符确保了替换函数找到第一个匹配项后补会停止对下一个匹配项的替换。</p>
      <h2 class="subtitle">“+”操作符会执行相加操作和字符串连接操作</h2>
      <p class="detialInfo">当操作数是字符串的时候a+b通常是执行连接操作，如果想执行数字相加，那就要再执行相加操作前先将其转换成数字类型，因为输入的内容可能是字符串类型的，如下：</p>
      <pre><code class="javascript">1 + document.getElementById("inputElem").value;/*连接操作*/<br>1 + Number(document.getElementById("inputElem").value);/*相加操作*/</code></pre>
      <p class="detialInfo">相减操作会尝试将操作数转换成数字类型，如下：</p>
      <pre><code class="javascript">"3" - "1";/*2*/</code></pre>
      <h2 class="subtitle">typeof</h2>
      <p class="detialInfo">typeof会返回一个js基本类型的实例的类型，Array实际上不是基本类型，所以typeof Array对象返回Object，如下：</p>
      <pre><code class="javascript">typeof {} === "object";/*true*/<br>typeof [] === "object";/*true*/<br>typeof null === "object";/*true*/</code></pre>
      <h2 class="subtitle">instanceof</h2>
      <p class="detialInfo">instanceof 返回指定对象是否是由某个类构造的实例，这个对我们检查指定对象是否自定义类型之一很有帮组，但是如果你是用文本语法创建的内置类型那可能会得出错误的结果，如下：</p>
      <pre><code class="javascript">"hello" instanceof String;/*false*/<br>new String("hello") instanceof String;/*true*/</code></pre>
      <p class="detialInfo">由于Array实际上不是内置类型（只是伪装成内置类型，使用typeof不能得到预期的结果），使用instanceof就能得到预期效果，如下：</p>
      <pre><code class="javascript">["item1","item2"] instanceof Array;/*true*/<br>new Array("item1","item2") instanceof Array;/*true*/</code></pre>
      <p class="detialInfo">如果你想测试Boolean，String，Number或者Function的类型，你可以使用typeof，对于其他任何类型，用instanceof。</p>
      <p class="detialInfo">在一个function中，有一个预定义变量叫“arguments”，它以一个array的形式传递给function，但是它并不是真正的array，它只是一个类似array的对象，带有长度属性并且属性值从0—length，可以用下面的代码将其转换为真正的数组：</p>
      <pre><code class="javascript">var args = Array.prototype.slice.call(arguments,0);</code></pre>
      <p class="detialInfo">这个对有getElementsByTagName返回的NodeList对象也是一样的——他们都可以用上面的代码转换成合适的数组。</p>
      <h2 class="subtitle">使用“new”关键字构造内置类型</h2>
      <p class="detialInfo">js中有Object、Array、Boolean、Number、String和Function这些类型，他们各自都有各自的文字语法，所以就不需要显示构造函数了。如果使用new关键字来构造上面其中的一种类型，实际上将会得到一个类型为Object并且继承自你要构造的类型的原型对象（Function类型除外）。尽管你用new关键字构造了一个Number类型，它也将是一个Object类型。如下：</p>
      <pre><code class="javascript">typeof new Number(123);/*"object*/<br>typeof Number(123);/*"number*/<br>typeof 123;/*"number*/</code></pre>
      <h2 class="subtitle">使用“new”关键字构造任何东西</h2>
      <p class="detialInfo">如果你自己写构造函数并且忘记了new关键字，那么悲剧就发生了：</p>
      <pre><code class="javascript">var Car = function(colour) { this.colour = colour;}<br>var aCar = new Car("blue");<br>console.log(aCar.colour);/*"blue*/<br>var bCar = Car("blue");<br>console.log(bCar.colour);/*error*/<br>console.log(window.colour);/*blue*/</code></pre>
      <p class="detialInfo">使用new关键字调用函数会创建一个新的对象，然后调用新对象上下文中的函数最后再返回该对象。相反的，如果不使用new关键字在调用函数，那他将会变成一个全局对象。</p>
      <h2 class="subtitle">没有Integer类型</h2>
      <p class="detialInfo">数值计算是相对缓慢的，因为没有Integer类型。只有Number类型。Number是IEEE标准中双精度浮点运行（64位）类型。这意味着Number会引起下面的精度舍入错误：</p>
      <pre><code class="javascript">0.1 + 0.2 === 0.3/*false*/<br>a === b;/*true*/<br>1/a === 1/b/*false*/</code></pre>
      <p class="detialInfo">c出现上面的问题是因为按照Number的规范是允许出现+0和-0的，+0等于-0，但是正无大不等于负无穷大。</p>
      <h2 class="subtitle">没有块作用域</h2>
      <p class="detialInfo">js中没有块作用域的概念，只有函数作用域。如下：</p>
      <pre><code class="javascript">for(var i = 0; i < 10; i++) { console.log(i); }<br>var i; console.log(i);/*10*/</code></pre>
      <p class="detialInfo">当i被定义在for循环中，退出循环后它仍被保留在这个作用域内，所以最后调用console.log输出了10。可以强制将所有变量定义在函数的开头，有可能通过写一个立即执行的function俩创建一个作用域：</p>
      <pre><code class="javascript">(function(){ for(var i = 0; i < 10; i++){ console.log(i); }}());<br>var i; console.log(i);/*undefined*/</code></pre>
      <p class="detialInfo">在函数之前声明一个变量，然后在函数里重声明这个变量，那将会出现一个奇怪的问题，如果下：</p>
      <pre><code class="javascript">var x = 3;(function(){ console.log(x + 2);}());/*5*/<br>var x = 3;(function(){ console.log(x + 2); var x = 0;}());/*NaN*/</code></pre>
      <p class="detialInfo">这是因为在函数中x变量被重新定义了，这说明了翻译程序将var 表达式移动到了函数顶部了，最终就变成这样执行了：</p>
      <pre><code class="javascript">var x = 3;(function(){ var x; console.log(x + 2); x = 0;}());/*NaN—x is not defined*/</code></pre>
      <h2 class="subtitle">this和内部函数</h2>
      <p class="detialInfo">this关键字通常指当前正在执行的函数所在的对象，如果函数并没有在对象上被调用，比如在内部函数中，this就被设置为全局对象（window
      ），如下代码：</p>
      <pre><code class="javascript">var obj = { doSomething:function(){<br>var a = "bob"; console.log(this);/*当前执行对象*/<br>(function(){console.log(this);/*window-this is reset*/}());}};<br>obj.doSomething();</code></pre>
      <h2 class="subtitle">数据不存在：null和undefined</h2>
      <pre><code class="javascript">var a; a === null;/*false*/<br>a === undefined;/*true*/</code></pre>
      <p class="detialInfo">a实际上是undefined（尽管你用双等号==来与null比较会得到true的结果，但这只是表面上看起来正确的另一个错误）。如果想检查一个变量是否真的存在值，那不能用双等号==去判断，要用下面的方法：</p>
      <pre><code class="javascript">if(a !== null && a !== undefined) { ... }</code></pre>
      <h2 class="subtitle">arguments对象</h2>
      <p class="detialInfo">在一个函数中，可以引用arguments对象来遍历传入的参数列表，这个对象并不是Array，而是一个类似Array的对象（有一个length属性，其值在0-length-1之间）。为了将其转换成array，可以用array的slice函数来创建其对应的数组：</p>
      <pre><code class="javascript">(function(){<br> console.log(arguments instanceof Array);/*false*/<br> var argsArray = Array.prototype.slice.call(arguments);<br> console.log(argsArray instanceof Array);/*true*/<br>}());</code></pre>
      <p class="detialInfo">当一个函数的签名中有显示arguments参数时，他们是可以被重新分配的并且arguments对象也会被改变，这表明arguments对象指向了变量本身，不能利用arguments对象来给出他们的初始值：</p>
      <pre><code class="javascript">(function(a){<br> console.log(arguments[0]);/*1*/<br> a = 2;console.log(arguments[0]);/*2*/<br>}(1));</code></pre>
    </div>
  </div>
  <div class="column sideCol l">
    <ul class="title-list">
      <li><a class="link" href="#content1">日常开发状态</a></li>
      <li><a class="link" href="#content2">前端必会的知识点</a></li>
      <li><a class="link" href="#content3">js初级之操作字符串</a></li>
      <li><a class="link" href="#content4">JS初级之变量,DOM,循环语句</a></li>
      <li><a class="link" href="#content5">JS中级之函数</a></li>
      <li><a class="link" href="#content6">HTML5，CSS3面试题</a></li>
      <li><a class="link" href="#content7">js中的陷阱</a></li>
    </ul>
  </div>
</div>